<template>
    <div>
        <div class="fanhui">
            <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>

        <div>
            <van-search v-model="value" show-action label="" placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>

        </div>
        <div class="tuijians">搜索结果</div>
        <div class="tuijian">
            <div v-for="item in store.state.searchdata" :key="item.id">
                <div>
                    <img @click="seleteListData(item)" :src="item.url" alt="">
                </div>
                <div>
                    <div @click="seleteListData(item)">
                        {{ item.title }}
                    </div>
                    <div @click="seleteListData(item)">
                        {{ item.secondTitle }}
                    </div>
                    <div>
                        <div>
                            <span> ￥</span> <span>{{ item.price }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <van-back-top right="15vw" bottom="10vh" />
</template>

<script setup lang="ts">
import { liketypenames } from '@/api/index';
import { showToast } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
let router = useRouter()
let store = useStore()
const onClickLeft = () => history.back();
const value = ref('');
const onClickButton = () => showToast(value.value);
let seleteListData = (id: Number) => {
    router.push({
        path: `/xiangqing?id=${id}`
    })
    store.commit('updataxiangqingdata', id)
}
const onSearch = (val: string) => {

    liketypenames(val, val, 0, 30).then((result: any) => {

        if (result.data.msg == '没有该数据') {
            showToast('没有相关数据哦')
        } else {
            store.commit('updateSearchdata', result.data.data)
        }
    }).catch((err) => {
        console.log(err);
    });
};


</script>

<style lang="less" >
.van-nav-bar .van-icon,
.van-nav-bar__text {
    color: #333333;
}

.tuijian {
    width: 345rem;
    margin: 0 auto;

    >div {

        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        text-align: left;
        position: relative;
        top: 0;
        left: 0;

        >div:nth-child(1) {
            img {
                width: 150rem;
                height: 150rem;
                background-color: #fff;
                border-radius: 8rem;
            }

        }

        >div:nth-child(2) {
            border-bottom: 1px solid rgb(221, 240, 240);
            width: 170rem;

            >div:nth-child(1) {
                margin-top: 20rem;
                font-size: 16rem;
            }

            >div:nth-child(3) {
                position: absolute;
                bottom: 15rem;
                width: 170rem;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;

                span:nth-child(1) {
                    font-size: 14rem;
                    color: rgb(224, 121, 121);
                    font-weight: 600;
                }

                span:nth-child(2) {
                    font-size: 16rem;
                    color: rgb(255, 0, 0);
                }

                >div:nth-child(2) {
                    text-align: center;
                    font-size: 14rem;
                    width: 80rem;
                    height: 30rem;
                    line-height: 30rem;
                    border-radius: 15rem;
                    color: #fff;
                    background-color: rgb(243, 94, 94);
                }
            }
        }

    }

}

.tuijians {
    background-color: rgb(221, 240, 240);
    font-size: 24rem;
    padding-top: 15rem;
    padding-bottom: 8rem;
    color: rgb(238, 55, 55);
}
</style>